<template>
	<view class="container">
		<view class="input-container">
			<view class="input-item">
				<text class="input-label">帖子标题：</text>
				<input type="text" v-model="post.title" class="input-field" placeholder="请输入帖子标题" />
			</view>
			<view class="input-item">
				<text class="input-label">帖子内容：</text>
				<textarea v-model="post.content" class="input-field" placeholder="请输入帖子内容"></textarea>
			</view>
			<!-- 分区选择下拉框 -->
			<uni-section type="line" class="mb-10" title="请选择分区">
				<view style="padding: 0 20rpx">
					<lfj-dropdown-box v-model="value1" :localdata="localdata" filterable
						@change="change"></lfj-dropdown-box>
				</view>
			</uni-section>
		</view>
		<view class="button-container">
			<button @click="publishPost" class="publish-button">发布帖子</button>
		</view>
	</view>
</template>
<style scoped>
/* 基础样式 */
.container {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.input-container {
  margin-bottom: 20px;
}

.input-item {
  margin-bottom: 15px;
}

.input-label {
  display: block;
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.input-field {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  box-sizing: border-box;
  height: 50px;
}

.input-field:focus {
  border-color: #007bff;
  outline: none;
}

textarea.input-field {
  height: 120px;
  resize: vertical;
}

.picker-content {
  padding: 12px;
  font-size: 16px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
}

.button-container {
  text-align: center;
}

.publish-button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 12px 25px;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%;
  box-sizing: border-box;
}

.publish-button:hover {
  background-color: #0056b3;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .container {
    padding: 20px;
    max-width: 100%;
  }

  .input-label {
    font-size: 13px;
  }

  .input-field {
    padding: 10px;
    font-size: 20px;
  }

  .publish-button {
    padding: 10px 20px;
    font-size: 18px;
  }
}
</style>
<script>
	export default {
		data() {
			return {
				value1: 'value3',
				post: {
					title: '',
					content: '',
				},
				localdata: [
					{
						text: '接妆',
						value: 'tab1'
					},
					{
						text: '接毛',
						value: 'tab2'
					},
					{
						text: '摄影',
						value: 'tab3'
					},
					{
						text: '票代',
						value: 'tab4'
					},
					{
						text: '道具师',
						value: 'tab5'
					}
				],
				tab:'',
				section:'',
			};
		},
		methods: {
			change(e) {
				this.tab=e.value
			},
			//发布帖子
			async publishPost() {
				if (!this.post.title || !this.post.content) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				this.uid = uni.getStorageSync('uid');
				if (!this.tab){
					uni.showToast({
						title: '请选择分区',
						icon: 'error',
					});
					return;
				}
				try {
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: 'http://14.103.233.198:9999/addpost', // 替换为实际的接口
							method: 'POST',
							data: {
								title: this.post.title,
								content: this.post.content,
								uid: this.uid,
								tab:this.tab
							},
							success: (response) => resolve(response),
							fail: (error) => reject(error),
						});
					});
					if (res.data.success) {
						uni.showToast({
							title: '发布成功',
							icon: 'success',
						});
						uni.reLaunch({
							url: '/pages/tabbar/tabbar-1/tabbar-1'
						});
					} else {
						// 如果没有返回用户信息，可以跳转到登录页面或提示错误
						uni.showToast({
							title: '发布失败' || res.data.message,
							icon: 'none',
						});
						uni.reLaunch({
							url: '/pages/tabbar-1/tabbar-1'
						});
					}
				} catch (error) {
					console.error('发布失败:', error);
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none',
					});
				}
			}
		}
	};
</script>